<template>
  <a-card>
    <a-row :gutter="64">
      <a-col :span="7" :offset="1">
        <a-card title="个人信息">
          <img slot="cover" alt="avatar" :src="baseURL + data.avatarUrl" />
          <a-descriptions :column="1">
            <a-descriptions-item label="登录账号">{{ data.name }} </a-descriptions-item>
            <a-descriptions-item label="用户昵称"> {{ data.nickname }} </a-descriptions-item>
            <a-descriptions-item label="所属部门"> {{ depts.find((e) => e.id === data.deptId).name }} </a-descriptions-item>
            <a-descriptions-item label="安全设置">
              <a-button
                type="link"
                icon="setting"
                @click="
                  () => {
                    visible = !visible
                  }
                "
              >
                修改密码
              </a-button>
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="14">
        <a-card title="基本信息">
          <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
            <a-form-model-item label="昵称" prop="nickname">
              <a-input v-model="form.nickname" />
            </a-form-model-item>

            <a-form-model-item label="头像" prop="avatarUrl">
              <a-upload
                name="file"
                list-type="picture-card"
                :show-upload-list="false"
                :headers="{ accessToken: userToken }"
                :action="baseURL + '/oauth/upload/avatar'"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="form.avatarUrl" :src="baseURL + form.avatarUrl" alt="avatar" style="width: 100%" />
                <div v-else>
                  <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
              <a-button type="primary" :loading="confirmLoading" @click="onSubmit"> 保存 </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </a-col>
    </a-row>
    <a-modal title="修改密码" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" @ok="handleOk()">
      <a-form-model ref="pwdform" :model="pwdform" :rules="pwdrules" :label-col="{ span: 6 }" :wrapper-col="{ span: 10 }">
        <a-form-model-item label="旧密码" prop="oldPwd">
          <a-input-password v-model="pwdform.oldPwd" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="新密码" prop="newPwd">
          <a-input-password v-model="pwdform.newPwd" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="确认密码" prop="confirmPwd">
          <a-input-password v-model="pwdform.confirmPwd" autocomplete="off" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>
<script>
// import { getMyself, saveMyself } from '@/api/user'
// import { listDept } from '@/api/enum'
// import { getBase64 } from '@/utils'
// import { mapGetters } from 'vuex'

// export default {
//   data() {
//     const validatePass = (rule, newPwd, callback) => {
//       if (newPwd === '') {
//         callback(new Error('请输入新密码'))
//       } else {
//         if (this.pwdform.confirmPwd !== '') {
//           this.$refs.pwdform.validateField('confirmPwd')
//         }
//         callback()
//       }
//     }
//     const validatePass2 = (rule, confirmPwd, callback) => {
//       if (confirmPwd === '') {
//         callback(new Error('请再次输入新密码'))
//       } else if (confirmPwd !== this.pwdform.newPwd) {
//         callback(new Error('两次密码不一致!'))
//       } else {
//         callback()
//       }
//     }
//     return {
//       visible: false,
//       uploadLoading: false,
//       baseURL: process.env.VUE_APP_API_BASE_URL || process.env.baseURL,
//       confirmLoading: false,
//       depts: [],
//       data: {},
//       form: { nickname: '', avatarUrl: '' },
//       rules: {
//         nickname: [
//           { required: true, message: '请输入昵称', trigger: 'blur' },
//           { min: 2, max: 32, message: '昵称长度2-32', trigger: 'blur' }
//         ]
//       },
//       pwdform: { oldPwd: '', newPwd: '', confirmPwd: '' },
//       pwdrules: {
//         oldPwd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
//         newPwd: [{ validator: validatePass, trigger: 'change' }],
//         confirmPwd: [{ validator: validatePass2, trigger: 'change' }]
//       }
//     }
//   },
//   mounted() {
//     this.loadData()
//   },
//   computed: {
//     ...mapGetters(['userToken'])
//   },
//   methods: {
//     async loadData() {
//       if (this.depts.length === 0) {
//         let res = await listDept()
//         this.depts = res.data
//       }
//       let res = await getMyself()
//       this.data = res.data
//       this.form.nickname = res.data.nickname
//       this.form.avatarUrl = res.data.avatarUrl
//     },
//     onSubmit() {
//       this.$refs['form'].validate(async (valid) => {
//         this.confirmLoading = true
//         try {
//           if (valid) {
//             const res = await saveMyself(this.form)
//             this.$message.success({ content: '修改成功!', duration: 2 })
//             this.loadData()
//             this.$store.commit('user/SET_NAME', this.form.nickname)
//             this.$store.commit('user/SET_AVATAR', this.form.avatarUrl)
//           }
//         } catch (err) {
//           console.error(err.message)
//         } finally {
//           this.confirmLoading = false
//         }
//       })
//     },
//     handleOk() {
//       this.$refs['pwdform'].validate(async (valid) => {
//         this.confirmLoading = true
//         try {
//           if (valid) {
//             const res = await saveMyself(this.pwdform)
//             this.$message.success({ content: '修改成功!', duration: 2 })
//             this.visible = false
//             this.pwdform = { oldPwd: '', newPwd: '', confirmPwd: '' }
//           }
//         } catch (err) {
//           console.error(err.message)
//         } finally {
//           this.confirmLoading = false
//         }
//       })
//     },
//     handleCancel() {
//       this.visible = false
//       this.pwdform = { oldPwd: '', newPwd: '', confirmPwd: '' }
//     },
//     handleChange(info) {
//       if (info.file.status === 'uploading') {
//         this.uploadLoading = true
//         return
//       }
//       if (info.file.status === 'done') {
//         if (info.file.response.code !== 200) {
//           this.$message.error(info.file.response.message)
//           return
//         }
//         this.form.avatarUrl = info.file.response.data
//         this.uploadLoading = false
//         // Get this url from response in real world.
//         // getBase64(info.file.originFileObj, (imageUrl) => {
//         //   this.form.avatarUrl = imageUrl
//         //   this.uploadLoading = false
//         // })
//       }
//     },
//     beforeUpload(file) {
//       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
//       if (!isJpgOrPng) {
//         this.$message.error('You can only upload JPG file!')
//       }
//       const isLt2M = file.size / 1024 / 1024 < 2
//       if (!isLt2M) {
//         this.$message.error('Image must smaller than 2MB!')
//       }
//       return isJpgOrPng && isLt2M
//     }
//   }
// }
</script>
